<template>
  <el-row class="tableFrom">
    <!--  -->
    <el-table :data="tabData" style="width: 100%" height="300" class="forl">
      <template v-for="(item, index) in tableTitle">
        <!-- //普通显示 -->
        <el-table-column
          :width="item.width"
          v-if="item.type == 1"
          :prop="item.prop"
          :label="item.name"
          :key="index"
        >
          <template slot-scope="scope">
            <div>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
          <el-table-column
          :width="item.width"
          v-if="item.type == 5"
          :prop="item.prop"
          :label="item.name"
          :key="index"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.number"
              placeholder="请输入数量"
              type="number"
              min="1"
            >
              </el-input>
          </template>
        </el-table-column>
        <!-- //输入 -->
        <el-table-column
          :width="item.width"
          v-if="item.type == 2"
          :prop="item.prop"
          :label="item.name"
          :key="index"
        >
          <template slot-scope="scope">
            <el-popover
                 placement="bottom-end"
                    width="600px"
                    trigger="focus"
              >
           <el-input
              v-model="scope.row.nameValue"
             @input="handleFocus(scope.$index)"
              slot="reference"
              placeholder="请输入内容"
            >
                </el-input>
                <el-table
                  v-loading="loading"
                  :data="currentPageData"
                  @row-click="clickEdit($event, scope.$index)"
                >
                  <template v-for="(item, index) in clickTitle">
                    <el-table-column
                      :property="item.prop"
                      :key="index"
                      :label="item.name"
                      :width="item.width"
                    ></el-table-column>
                  </template>
                </el-table>
                <!-- <el-button slot="reference" @click="handleFocus(scope.$index)" icon="el-icon-search"></el-button> -->
                <el-pagination
                  background
                  class="flexBo"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  @current-change="setCurrentPageData"
                  layout="prev, pager, next"
                  :total="totalPage"
                >
                </el-pagination>
              </el-popover>
         

            
          </template>
        </el-table-column>
        <el-table-column
          :width="item.width"
          :fixed="item.fixed"
          v-if="item.type == 4"
          :prop="item.prop"
          label="操作"
          :key="index"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(it.number, scope.$index)"
              v-for="it in item.arr"
              :type="it.flag != 2? it.type: scope.row.status == 1? 'danger': 'success'"
              :key="it.number"
            >
              {{it.name}}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-row>
</template>

<script>
import {
  getAdviceDrug,
  deleteNurseAdvice,
  getNurseAdvice,
  getNurseAutoProject,
} from "@/api/hospitalNurse";

export default {
  data() {
    return {
      tabData: [],
      loading: true,
      clickTitle: [],
      clickData: [],
      index: 0,
      keyWordInput: "",
      count: 0,
      page: 1,
      limit: 10,
      showId: "",
                totalPage: 1, // 统共页数，默认为1
             currentPage: 1, //当前页数 ，默认为1
            pageSize: 10, // 每页显示数量
            currentPageData: [], //当前页显示内容
    };
  },
  watch: {
    advice_id(to) {
      this.tabData = [];
      this.getNurseAdvice();
    },
  },
  props: {
    tableTitle: {
      type: Array,
      default: "",
    },
    type: {
      type: Number,
      default: "",
    },
    flag: {
      type: Boolean,
      default: "",
    },
    advice_id: {
      type: Number,
      default: "",
    },
  },

  // 1 护士工作站计价获取开立医嘱
  created() {
    if (this.type == 1) {
      this.clickTitle.push(
        {
          prop: "key",
          name: "序号",
          type: 1,
          width:50
        },
        {
          prop: "business_name",
          name: "名称",
          type: 1,
          width:300
        },

        {
          prop: "yf",
          name: "剂型",
          type: 1,
          width:100
        },
        // {
        //   prop: "name",
        //   name: "名称",
        //   type: 1,
        // }
        
      );
      
    }
  },
  mounted() {
    // console.log("现在的值",this.tabData)
    // this.getNurseAdvice();
    this.tabData = [
              {
                key: 1,
                name: "",
                nameValue: "",
                nameFlag: false,
                source: "护士计价",
              
                EditId: 0,
                number:1,
              },
            ];
            this.getAdviceDrug('')
  },
  methods: {
    // 获取计价
    // getNurseAdvice() {
    //   getNurseAdvice({ id: this.advice_id })
    //     .then((res) => {
    //       if (res.data.lists.length != 0) {
    //         res.data.lists.map((item, key) => {
    //           item.nameValue = item.name;
    //           item.nameFlag = false;
    //           item.originalId = item.id
    //           console.log(item)
    //           item.source = "护士计价"
    //           item.EditId = 1
    //           item.key = key + 1;
    //           item.number = item.number
    //           item.time_type = item.time_type == 1 ? "长期" : "临时";
    //           return item;
    //         });
    //         res.data.lists.push({
    //           name: "",
    //           nameValue: "",
    //           nameFlag: false,
    //           source: "护士计价",
    //           EditId: 0,
             
    //         });
    //         this.tabData = res.data.lists;
    //       } else {
    //         this.tabData = [
    //           {
    //             key: 1,
    //             name: "",
    //             nameValue: "",
    //             nameFlag: false,
    //             source: "护士计价",
              
    //             EditId: 0,
    //             number:1,
    //           },
    //         ];
    //       }
    //     })
    //     .catch((e) => {
    //       this.$message({
    //         message: e.message,
    //         type: "error",
    //       });
    //     });
    // },
    handleFunction() {
      let data = [];
      console.log("tabdata:::",this.tabData)
      this.tabData.forEach((item) => {
       console.log("item:::",item)
        if (item.id) {
          data.push({
            id: item.id?item.id:0,
            business_id:item.business_id?item.business_id:item.id,  
            number: item.number,
            type:item.type
          });
        }
      });
      return data;
    },
    handleCurrentChange(e) {
      this.page = e;
      this.clickData = [];
      this.getAdviceDrug(this.tabData[this.index].nameValue);
    },
    clickEdit(e, q) {
      console.log(e,q)
      this.index=q
      if(e.id == this.tabData[q].id){
        return false
      }
      let data = {
        nameFlag: false,
        nameValue: e.business_name,
        source: "护士计价",
        EditId: this.tabData[q].EditId,
        originalId:this.tabData[q].originalId ? this.tabData[q].originalId : 0,
        ...e,
        number:this.tabData[q].number ? this.tabData[q].number : 1
      };
      this.tabData.splice(this.index, 1, data);
      // this.tabData.push(data)
      // 判断是否有默认增加表格
      let flag = false;
      this.tabData.forEach((item, key) => {
        console.log(item)
        item.key = key + 1;
        if (item.id) {
          flag = true;
        } else {
          flag = false;
        }
      });

      if (flag) {
        this.tabData.push({
          nameFlag: false,
          nameValue: "",
          source: "护士计价",
          EditId: 0,
          number:1,
        });
      }
    },
    handleFocus(e) {
      this.loading = true;
      this.clickData = [];
      this.page = 1
      console.log('000')
      this.tabData = this.tabData.filter((item, key) => {
        if (key == e) {
          item.nameFlag = true;
        } else {
          item.nameFlag = false;
        }
        return item;
      });
      if (this.type == 1) {
        this.getAdviceDrug(this.tabData[e].nameValue);
      }
      this.index = e;
    },

    getAdviceDrug(e) {
      // console.log(e)
      getNurseAutoProject({
       
        keyword: e,

      })
        .then((res) => {
          this.loading = false;
          if (!res.data) {
            this.count = 0;
            return false;
          }else{
               res.data.forEach((item, key) => {
            item.key = key + 1;
          });
           this.totalPage = res.data.length;
          this.clickData = res.data;
              // this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
           let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.clickData.slice(
                begin,
                end
                );
          }

         
        })
        .catch((e) => {
          this.$message({
            message: e.message,
            type: "error",
          });
        });
    },
          setCurrentPageData(e) {
            console.log(e)
            this.currentPage=e
                  let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.clickData.slice(
                begin,
                end
                );
        },
    handleEdit(e, q) {
      console.log(this.tabData[q])
      if (this.tabData[q].EditId == 1) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteNurseAdvice({ id: this.tabData[q].id})
              .then((res) => {
                // console.log(res);
                this.tabData = this.tabData.filter((item, key) => {
                  if (key != q) {
                    return item;
                  }
                });
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              })
              .catch((e) => {
                this.$message({
                  message: e.message,
                  type: "error",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }else if(this.tabData[q].EditId == 0){
        if(this.tabData.length > 1){
          this.tabData = this.tabData.filter((item, key) => {
            if (key != q) {
              return item;
            }
          });
        }
      }
    },
  },
  destroyed() {
    // console.log("进入")
    this.tabData = [];
    this.clickData = [];  
  },
};
</script>

<style lang="scss">
.forl{
  text-align:center;
}

.flexBo{
  margin-top: 10px;
  text-align: center;
}
</style>